<template>
	<view class="list">
		<head-nav title="歌单" :showMenu="true" color="white"></head-nav>
		<loading v-if="isloading"></loading>
		<template v-else>
			<view class="cover" :style="{backgroundImage:'url('+playlist.coverImgUrl+')'}"></view>
			<container>
				<!-- 此处有插槽，可以直接把组件当父标签 -->
				<scroll-view scroll-y="true" style="width: 100%;height: 100%;">
					<view class="list-head">
						<view class="left">
							<image :src="playlist.coverImgUrl"></image>
							<text class="iconfont icon-yousanjiao">{{playlist.playCount | qq}}</text>
						</view>
						<view class="right">
							<view class="top">{{playlist.name}}</view>
							<view class="mid">
								<image :src="playlist.creator.avatarUrl"></image> {{playlist.creator.nickname}}
							</view>
							<view class="bottom">
								{{playlist.description}}
							</view>
						</view>
					</view>

					<!-- #ifdef MP-WEIXIN -->
					<button open-type="share" class="btn" v-show="!isloading">
						<text class="iconfont icon-fenxiang"></text>分享给微信好友
					</button>
					<!-- #endif -->
					
					<!-- #ifdef H5 -->
					<view style="height: 60rpx;"></view>
					<!-- #endif -->

					<view class="music-list">
						<view class="top">
							<text class="iconfont icon-bofang"></text>
							<text>播放全部</text>
							<text v-if="playlist.trackCount">(共{{playlist.trackCount}}首)</text>
						</view>
						<view class="skeleton" v-if="isloading">
							<m-for-skeleton :avatarSize="133" :row="2" :loading="isloading" :isarc="'square'" v-for="key in 10" :key="key"
							 :title="false">
							</m-for-skeleton>
						</view>
						<view v-else>
							<view class="each" v-for="(n,i) in tracks " :key="i" @tap="toDetail(n.id)">
								<view class="left">{{i+1}}</view>
								<view class="mid">
									<view class="up">
										<text> {{n.name}}</text>
									</view>
									<view class="down">
										<image src="../../static/vip.png"></image>
										<text>{{n.ar[0].name}} - {{n.al.name}}</text>
									</view>
								</view>
								<view class="right">
									<text class="iconfont icon-bofang1"></text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</container>
		</template>
	</view>
</template>

<script>
	import headNav from '../../components/headNav/headNav.vue'
	import container from '../../components/container/container.vue'
	import {
		List
	} from "../../common/api.js"
	export default {
		data() {
			return {
				playlist: [],
				tracks: [],
				isloading: true
			};
		},
		onLoad({
			id
		}) {
			List(id).then(res => {
				this.isloading = false
				console.log(res)
				this.playlist = res.data.playlist
				this.tracks = res.data.playlist.tracks
				//移除播放列表
				// this.$store.commit('setListTracks', res.data.playlist.trackIds)
				// console.log(this.$store.state.listTracks)
			})
		},
		components: {
			headNav,
			container,
		},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url: '../detail/detail?id=' + id,
				});
			}
		}
	}
</script>

<style lang="scss">
	.list {
		.cover {
			width: 100%;
			height: 100%;
			position: fixed;
			background-position: center 190%;
			filter: blur(15px) brightness(90%);
			transform: scale(1.5);
		}

		.list-head {
			width: 100%;
			height: 264rpx;
			margin: 10rpx auto;
			display: flex;

			.left {
				width: 264rpx;
				height: 264rpx;
				position: relative;
				margin: 0 30rpx;
				border-radius: 15rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}

				text {
					font-size: 24rpx;
					position: absolute;
					top: 6rpx;
					right: 8rpx;
					color: white;
				}
			}

			.right {
				flex: 1;


				.top {
					font-size: 34rpx;
					color: white;
				}

				.mid {
					height: 54rpx;
					display: flex;
					align-items: center;
					margin: 20rpx 0;
					font-size: 24rpx;
					color: $gray2;

					image {
						width: 54rpx;
						height: 54rpx;
						border-radius: 50%;
						margin-right: 12rpx;
					}
				}

				.bottom {
					position: relative;
					width: 90%;
					line-height: 34rpx;
					font-size: 24rpx;
					color: $gray2;
					//多行省略
					text-overflow: ellipsis;
					display: -webkit-box;
					word-break: break-all;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
			}
		}

		.btn {
			border: 0;
			outline: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 45%;
			border-radius: 60rpx;
			height: 74rpx;
			color: white;
			background: $gray;
			font-size: 28rpx;
			margin: 35rpx auto;
			overflow: hidden;

			.icon-fenxiang {
				margin-right: 16rpx;
			}
		}

		.music-list {
			background-color: white;
			border-radius: 60rpx 60rpx 0 0;
			overflow: hidden;

			.top {
				width: 95%;
				margin: 30rpx auto;
				display: flex;
				align-items: center;

				.iconfont {
					font-size: 64rpx;
					margin-right: 25rpx;
				}

				text:nth-child(3) {
					color: gray;
					font-size: 30rpx;
					margin-left: 15rpx;
				}
			}

			.each {
				margin: 25rpx auto;
				width: 95%;
				height: 80rpx;
				display: flex;

				.left {
					text-align: center;
					width: 64rpx;
					font-size: 35rpx;
					color: lightgray;
					margin-right: 25rpx;
				}

				.mid {
					width: 80%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.up {
						position: relative;
						font-size: 30rpx;

						text {
							display: block;
							width: 80%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					.down {
						display: flex;
						align-items: center;

						image {
							width: 50rpx;
							height: 25rpx;
							margin-right: 10rpx;
						}

						font-size: 25rpx;
						color: rgba($color: #c2c2c2, $alpha: 1);

						text {
							display: block;
							width: 80%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}

				.right {
					width: 10%;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					text {
						font-size: 50rpx;
						font-weight: 100;
						color: rgba($color: #c2c2c2, $alpha: 0.7);
					}
				}

			}
		}
	}
</style>
